import { Button } from '@arco-design/web-react';
import { useNavigate } from 'react-router-dom';

interface Props {
  loading?: boolean;
  tips?: string;
}

export default function NotFoundPage({ loading, tips }: Props) {
  const navigate = useNavigate();
  return (
    <div className="not-found-page bg-page">
      {/* <NavBar menu={menus} onChange={handleMenuChange} /> */}
      <div className="flex-1 d-flex-c page-content">
        {loading ? (
          <img className="pic-loading" src="/pic/pic_loading.png" alt="" />
        ) : (
          <img className="pic-not-found" src="/pic/pic_not_found.png" alt="" />
        )}
        <div className="font-16 text-6-color mt-20">
          {loading ? '正在加载...' : tips ?? '实在抱歉！页面一不小心跑丢了…'}
        </div>
        {loading ? null : (
          <Button className="mt-20 mb-60" type="primary" shape="round" onClick={() => navigate('/home')}>
            返回首页
          </Button>
        )}
      </div>
    </div>
  );
}
